<template>
  <!-- 导航栏 -->
  <van-nav-bar title="充值中心" left-text="返回" left-arrow @click-left="goBack" />

  <div role="alert" class="van-notice-bar">
    <i class="van-badge__wrapper van-icon van-icon-warning van-notice-bar__left-icon">
    </i>
    <div role="marquee" class="van-notice-bar__wrap">
      <div class="van-notice-bar__content">公告：未满18岁的未成年人请勿消费</div>
    </div>
  </div>
  <div class="van-cell van-cell--large">
    <i class="van-badge__wrapper van-icon van-icon-gold-coin van-cell__left-icon"></i>
    <div class="van-cell__title">
      <span>账户余额：￥{{ LoginUser.money }}</span>
    </div>
  </div>
  <div class="van-cell van-cell--large">
    <i class="van-badge__wrapper van-icon van-icon-manager van-cell__left-icon"></i>
    <div class="van-cell__title">
      <span>用户：{{ LoginUser.nickname }}</span>
    </div>
  </div>

  <van-field
    label="自定义金额"
    v-model="nums"
    readonly
    clickable
    @touchstart.stop="isShow = true"
  />
  <van-number-keyboard
    v-model="nums"
    theme="custom"
    close-button-text="完成"
    :show="isShow"
    :maxlength="6"
    @blur="isShow = false"
    @close="recharge()"
  />

  <div
    role="separator"
    class="van-divider van-divider--hairline van-divider--content-center"
  >
    固定金额
  </div>

  <van-row justify="space-around"
    style="font-size: 18px; color: #1989fa; text-align: center; margin-bottom: 15px"
  >
    <van-col span="7" v-for="item in amount" :key="item.id" @click="confirm(item.num)">
      <div
        style="
          border: 1px solid #1989fa;
          padding: 5px 0;
          display: flex;
          justify-content: center;
          margin-bottom: 15px;
        "
      >
        <i class="van-badge__wrapper van-icon van-icon-gold-coin-o van-button__icon"></i>
        <span>{{ item.num }}元</span>
      </div>
    </van-col>
  </van-row>

  <van-field
    v-model="content"
    rows="2"
    autosize
    label="充值备注"
    type="textarea"
    maxlength="100"
    show-word-limit
  />
</template>
<script setup>
const { cookies } = useCookies();
const router = useRouter();
const LoginUser = reactive(cookies.get("LoginUser"));
const amount = ref([
  {
    id: 1,
    num: 5,
  },
  {
    id: 2,
    num: 10,
  },
  {
    id: 3,
    num: 20,
  },
  {
    id: 4,
    num: 50,
  },
  {
    id: 5,
    num: 100,
  },
  {
    id: 6,
    num: 200,
  }
]);
const isShow = ref(false);
const point = ref(null);
const content = ref(null);
const nums = ref(null);
const goBack = () => {
  router.push("/business/base/index");
};
const confirm = (num) => {
  showConfirmDialog({
    title: `充值${num}元`,
    message: `是否确认确充值${num}元`,
  })
    .then(() => {
      point.value = num;
      recharge();
    })
    .catch(() => {});
};

const recharge = async () => {
  isShow.value = false;
  let data = {
    point: point.value ? point.value : nums.value,
    busid: LoginUser.id,
    content: content.value,
  };
  let result = await Api.baserecharge(data);
  if (result.code == 1) {
    //设置cookie
    showNotify({
      type: "success",
      message: result.msg,
      onClose: () => {
        router.push("/business/base/index");
      },
    });
  } else {
    showNotify({ type: "danger", message: result.msg });
  }
};
</script>
<style scoped>
.van-divider--content-center {
  color: rgb(25, 137, 250);
  border-color: rgb(25, 137, 250);
  padding: 0px 16px;
}
</style>
